	<template>
		<div class="page-wrap" data-title="订单列表页面">
			<div class="page-inner">
				<div class="section">
					<div class="sec-title">订单筛选</div>
					<div class="sec-ctx">
						<div class="filter-box">
							<div class="filter-item">
								<div class="filter-title">订单编号</div>
								<div class="filter-val">
									<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
								</div>
							</div>
							<div class="filter-item">
								<div class="filter-title">下单时间</div>
								<div class="filter-val">
									<el-date-picker v-model="keyword" type="daterange" align="right" unlink-panels range-separator="至"
										start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
										:picker-options="pickerOptions">
									</el-date-picker>
								</div>
							</div>
							<div class="filter-item">
								<div class="filter-title">收货人姓名</div>
								<div class="filter-val">
									<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
								</div>
							</div>
							<div class="filter-item">
								<div class="filter-title">收货人手机号</div>
								<div class="filter-val">
									<el-input v-model="keyword" clearable placeholder="请输入"> </el-input>
								</div>
							</div>
							<div class="btn-box">
								<el-button type="primary" @click="setView()"> 搜索 </el-button>
								<el-button type="default" @click="resetSearch()"> 重置 </el-button>
							</div>
						</div>
					</div>
				</div>

				<div class="section">
					<div class="sec-title">订单列表</div>

					<div class="sec-ctx">
						<div class="tab-wrap">
							<el-tabs v-model="tabName" @tab-click="tabClick">
								<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.title" :name="item.name">
								</el-tab-pane>
							</el-tabs>
						</div>

						<div class="order-list">
							<div class="order-title-box">
								<div class="sub">
									<div class="text">发货单号</div>
								</div>
								<div class="sub">收货人</div>
								<div class="sub">收货人电话</div>
								<div class="sub">收货地址</div>
								<div class="sub">客户备注</div>
								<div class="sub">下单距今</div>
								<div class="sub">成单时间</div>
								<div class="sub">发货状态</div>
								<!-- <div class="sub">导出状态</div> -->
								<div class="sub">操作</div>
							</div>

							<div class="order-item" v-for="(item, index) in orderList" :key="index">
								<!-- <div class="item-top">
									<div class="t-left">
										<span>订单编号：{{ item.orderNo }}</span>
										<span class="divider"></span>
										<span>下单时间：{{ item.createdTime }}</span>
									</div>
									<div class="t-right">
										{{ item.orderStatusText }}
									</div>
								</div> -->
								<div class="item-bottom">
									<!-- <div class="sub">
										<div class="product-box">
											<div class="product-item" v-for="(product_item, sub_index) in item.productJson" :key="sub_index">
												<div class="img-box">
													<el-image style="width: 50px; height: 50px" :src="product_item.image"
														:preview-src-list="[product_item.image]">
													</el-image>
												</div>
												<div class="title-box">
													<div class="title">{{ product_item.title }}</div>
													<div class="guige">{{ product_item.keyVals}}</div>
												</div>
												<div class="shuliang-box">
													<div class="price">￥ {{ product_item.priceSale }}</div>
													<div class="num">x {{ product_item.num }}</div>
												</div>
											</div>
										</div>
									</div> -->
									
									<div class="sub">
										<div class="text">{{item.orderNo}}</div>
									</div>
									<div class="sub" data-title="收货人">{{item.cus_name}}</div>
									<div class="sub" data-title="收货人电话">{{item.cus_phone}}</div>
									<div class="sub" data-title="收货地址">{{item.cus_full_addr}}</div>
									<div class="sub" data-title="客户备注">{{item.remark}}</div>
									<div class="sub" data-title="下单距今">{{item.xxx}}</div>
									<div class="sub" data-title="成单时间">{{item.createdTime}}</div>
									<div class="sub" data-title="发货状态">{{item.xxx}}</div>
									<!-- <div class="sub" data-title="导出状态">{{item.xxx}}</div> -->
									<div class="sub">
										<div class="row-btns">
											<router-link :to="'/ship-detail?id=' + item.id">查看详情</router-link>
											<el-button type="text" @click="do_order_send(item)">
												发货
											</el-button>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="pagi-box">
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="pagination.pageNums" :page-sizes="[10, 20, 50, 100, 200]" :page-size="pagination.pageSize"
								layout="total, sizes, prev, slot, next, jumper" :total="total" :pager-count="5">
								<span class="cus-current-page">
									<span> {{ pagination.pageNum }}/{{ totalPage }} </span>
								</span>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</template>

	<script>
		import {
			SHOP_TYPE
		} from '@/config/env.js'

		import {
			mapState
		} from "vuex";
		export default {
			name: "order-manager",
			components: {},

			data() {
				return {
					orderList: [],
					tabName: "全部",
					keyword: "",
					tabSelect: {
						value: '',
						title: "全部",
						name: "全部"
					},
					pagination: {
						page: 1,
						pageSize: 10,
					},
					total: 0,

					pickerOptions: {
						shortcuts: [{
								text: "最近一周",
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
									picker.$emit("pick", [start, end]);
								},
							},
							{
								text: "最近一个月",
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
									picker.$emit("pick", [start, end]);
								},
							},
							{
								text: "最近三个月",
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
									picker.$emit("pick", [start, end]);
								},
							},
						],
					},
				};
			},
			computed: {
				totalPage() {
					let pages = Math.ceil(this.total / this.pagination.pageSize);
					if (pages < 1) {
						pages = 1;
					}
					return pages;
				},
				tabList() {
					return [
						// 状态（为空则全部） ：-5-待支付 -1-已取消 0-待成团 1-待审核 2-待发货 3-待收货 4-待自提 5-已完成
						// {
						// 	value: '',
						// 	title: "全部",
						// 	name: "全部"
						// },
						// {
						// 	value: -5,
						// 	title: "待付款",
						// 	name: "待付款"
						// },
						// {
						// 	value: 0,
						// 	title: "待成团",
						// 	name: "待成团"
						// },
						// {
						// 	value: 1,
						// 	title: "待审核",
						// 	name: "待审核"
						// },
						{
							value: 2,
							title: "待发货",
							name: "待发货"
						},
						{
							value: 3,
							title: "待收货",
							name: "待收货"
						},
						{
							value: 4,
							title: "待自提",
							name: "待自提"
						},
						{
							value: 5,
							title: "已完成",
							name: "已完成"
						},
						// {
						// 	value: -1,
						// 	title: "已取消",
						// 	name: "已取消"
						// },
					];
				},
			},
			watch: {},
			created() {
				this.setView();
			},
			mounted() {},
			methods: {
				setView() {
					this.query_order()
				},

				query_order() {
					this.$api({
						url: '/admin_service.php',
						method: "get",
						data: {
							action: "fahuo_getList",
							...this.pagination,
							fahuoStatus: this.tabSelect.value, //状态（为空则全部） ：-5-待支付 -1-已取消 0-待成团 1-待审核 2-待发货 3-待收货 4-待自提 5-已完成
							keyword: '',
							startTime: "",
							endTime: "",
						},
					}).then((res) => {
						// console.warn("新闻详情", res);
						let {
							code,
							data,
							msg
						} = res
						if (res.code == 200) {
							let {
								list,
								count
							} = data;
							list.forEach((v) => {
								let shouhuoJson = v.shouhuoJson || {};
								let {
									address,
									area,
									city,
									country,
									firstName,
									lastName,
									name,
									phone,
									province,
								} = shouhuoJson

								if (SHOP_TYPE == 'foreign') { //海外商城
									// v.cus_name = [name, firstName, lastName], filter(v => v).join(' ')
								} else {}
								v.cus_name = [name, firstName, lastName].filter(v => v).join(' ')
								v.cus_full_addr = [country, province, city, area].filter(v => v).join(' ')
								v.cus_phone = phone;
							});

							this.orderList = list;
							this.total = count;
						}
					});
				},

				resetSearch() {},

				tabClick(e) {
					console.log('切换标签 tabClick e', e)
					console.log('切换标签 tabClick tabName', this.tabName)

					if (this.tabSelect.name == this.tabName) {
						return
					}
					this.tabSelect = this.tabList.find(v => v.name == this.tabName)
					this.setView()
				},

				// 分页
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);

					this.pagination.pageSize = val;
					this.setView();
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);

					this.pagination.pageNum = val;

					this.setView();
				},
				//分页


				// 
				do_order_send(item) {

				}
			},
		};
	</script>

	<style scoped lang="less">
		.cus-current-page {
			text-align: center;
		}

		.page-wrap {
			.page-inner {}
		}

		.section {
			margin-bottom: 10px;
			background: #fff;
			padding: 20px;
			border-radius: 6px;
		}

		.sec-title {
			margin-bottom: 20px;
			font-size: 14px;
			font-weight: bold;
		}

		.sec-ctx {}

		.filter-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.btn-box {
				margin-bottom: 15px;
			}

			.filter-item {
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				margin-right: 30px;

				.filter-title {
					margin-right: 15px;
				}

				.filter-val {}
			}
		}

		.tab-wrap {
			user-select: none;
		}

		// 商品信息
		.order-list {
			.order-title-box {
				margin-bottom: 20px;
				display: flex;
				color: #44434b;
				padding: 12px 0;
				padding-top: 17px;
				height: 46px;
				background: rgba(208, 214, 228, 0.2);
				font-weight: 700;

				.sub {
					flex: 1;
				}

				.sub:nth-child(1) {
					// flex: 3;
					// .text {
					// 	padding-left: 20px;
					// }
				}

				.sub:nth-child(2) {}

				.sub:nth-child(3) {}

				.sub:nth-child(4) {}

				.sub:nth-child(5) {}

				.sub:nth-child(6) {}

				.sub:nth-child(7) {}
			}

			.order-item {
				margin-bottom: 20px;
				border: 1px solid #d0d6e4;
				border-radius: 10px;

				.item-top {
					display: flex;
					justify-content: space-between;
					color: #44434b;
					padding: 12px 20px;
					padding-top: 17px;
					height: 46px;
					background: rgba(208, 214, 228, 0.2);
					font-weight: 700;

					.t-left {
						.flex();

						.divider {
							width: 1px;
							height: 14px;
							background: #ccc;
							margin: 0 15px;
						}
					}

					.t-right {
						margin-left: 30px;
						color: @theme;
					}
				}

				.item-bottom {
					display: flex;
					align-items: center;

					// .sub {
					// 	flex: 1;
					// }

					// .sub:nth-child(1) {
					// 	flex: 4;
					// }

					// .sub:nth-child(2) {}

					// .sub:nth-child(3) {}

					// .sub:nth-child(4) {}

					// .sub:nth-child(5) {}

					// .sub:nth-child(6) {}

					// .sub:nth-child(7) {}


					.sub {
						flex: 1;
					}

					.sub:nth-child(1) {
						// flex: 3;

						// .text {
						// 	padding-left: 20px;
						// }
					}

					.sub:nth-child(2) {}

					.sub:nth-child(3) {}

					.sub:nth-child(4) {}

					.sub:nth-child(5) {}

					.sub:nth-child(6) {}

					.sub:nth-child(7) {}



				}

				.product-box {
					padding-left: 15px;

					.product-item {
						position: relative;
						display: flex;
						align-items: center;
						padding: 10px;

						&+.product-item {
							&::before {
								position: absolute;
								top: 0;
								content: "";
								width: calc(100% - 70px);
								height: 1px;
								background: #ddd;
							}
						}

						.img-box {
							flex: 1;
						}

						.title-box {
							flex: 2;

							.title {
								margin-bottom: 10px;
								color: #655eff;
								cursor: pointer;
							}

							.guige {}
						}

						.shuliang-box {
							flex: 1;

							.price {
								margin-bottom: 15px;
							}

							.num {}
						}
					}
				}
			}
		}

		.pagi-box {
			margin-top: 20px;
			text-align: right;
		}
	</style>